<template>
	<view>
		<view v-if="!isReady">
			<tm-lottie url="" ref='lottie'></tm-lottie>
		</view>
		<view v-if="isReady">
			<tm-sheet color="blue">
				<tm-col :grid="12" class="text-weight-b text-size-g">{{PageData.name}}</tm-col>
			</tm-sheet>
			<tm-sheet color="blue text">

				<tm-row v-for="(item,index) in PageData.inParams" :key="index">

					<!-- 枚举类型参数 -->
					<tm-pickers v-if="item.type == 'enum'" :defaultValue="[0]" :list="loadList(item,index)"
						@confirm="selected">
						<tm-input name="chexing" input-type="string" right-icon="icon-angle-right"
							:prefixpText="item.name" placeholder="请选择" v-model="item.value" :disabled="true"></tm-input>
					</tm-pickers>
					<!-- 数字类型 -->
					<tm-input v-if="item.type == 'number'" input-type="digit" :prefixpText="item.name"
						v-model="item.value">
					</tm-input>
					<!-- 文本类型 -->
					<tm-input v-if="item.type == 'string'" :prefixpText="item.name" v-model="item.value"></tm-input>
				</tm-row>
			</tm-sheet>
			<!-- 计算结果显示部分 -->
			<tm-sheet color="blue text">
				<tm-tags color="bg-gradient-green-accent" class="pb-n4" :dense="true" model="fill">计算结果</tm-tags>
				<tm-row v-for="(item1,index1) in PageData.outParams" :key="index1">
					<tm-input v-if="item1.type == 'number'" v-model="item1.value" :title="item1.name" :disabled="true">
					</tm-input>
					<tm-input v-if="item1.type == 'string'" v-model="item1.value" :title="item1.name" :disabled="true">
					</tm-input>
					<tm-button v-if="item1.type == 'array'" @click="showArrayResult(item1.value)">{{item1.name}}
					</tm-button>
				</tm-row>
			</tm-sheet>
			<!-- 计算部分 -->
			<tm-sheet color="green text">
				<tm-row>
					<tm-col :grid="6">
						<tm-button @click="calc()">计算</tm-button>
					</tm-col>
					<tm-col :grid="6">
						<tm-button @click="reset()">重置</tm-button>
					</tm-col>
				</tm-row>
			</tm-sheet>
			<!-- 历史记录部分 -->
			<tm-sheet color="blue">
				<tm-tags color="bg-gradient-pink-accent" :dense="true" model="fill" @click="DelHistoryAll()"
					class="bx-active">历史记录
				</tm-tags>
				<tm-sheet color="blue text" v-for="(item2,index2) in HistoryData" :key="index2"
					>
					<tm-row v-for="(item3,index3) in item2.inParams" :key="item3.paramsID" @click="DelHistorySingle(index2)">
						{{item3.name}}:{{item3.value}}
					</tm-row>
					<tm-divider class="mt-10 mb-10"></tm-divider>
					<tm-row v-for="(item4,index4) in item2.outParams" :key="index4" v-if="item4.type == 'string' || item4.type ==  'number'">
						<tm-tags color="bg-gradient-green-accent" class="pb-n4" :dense="true" model="fill">
							{{item4.name}}:{{item4.value}}
						</tm-tags>

					</tm-row>
					
					<tm-row v-for="(item4,index4) in item2.outParams" :key="index4" v-if="item4.type == 'array'">
				
				<tm-button @click="showArrayHistory(item4.value)">{{item4.name}}</tm-button>		
						
						<!-- <tm-tags color="bg-gradient-green-accent" class="pb-n4" :dense="true" model="fill">
							{{item4.name}}:{{item4.value}}
						</tm-tags> -->
					
					</tm-row>
					
				</tm-sheet>

			</tm-sheet>
		</view>
		<!-- 数组型结果显示弹窗 -->
		<tm-dialog v-model="ArrayResultDialog" title="详细数据" theme="split">


			<tm-row v-for="(itema,indexa) in ArrayResultContent" :key="indexa">

				<tm-input type="text" :title="Object.keys(itema)[0]" v-model="Object.values(itema)[0]" :disabled="true">
				</tm-input>
			</tm-row>

		</tm-dialog>
		<!-- 数组型历史记录弹窗 -->
		<tm-dialog v-model="ArrayHistoryDialog" title="详细数据" theme="split">
		
		
			<tm-row v-for="(itemh,indexh) in ArrayResult" :key="indexh">
		
		<tm-input type="text" :title="Object.keys(itemh)[0]" v-model="Object.values(itemh)[0]" :disabled="true">
		</tm-input>
		
				<!-- <tm-input type="text" :title="itemh" v-model="itemh" :disabled="true">
				</tm-input> -->
			</tm-row>
		
		</tm-dialog>
	</view>


</template>

<script>
	import deepClone from '@/tm-vuetify/tool/function/deepClone.js';
	import result from '../../tm-vuetify/tool/lottieFile/add-user.js'
	export default {
		data() {
			return {
				qid: '', //查询参数
				isReady: false, //是否准备就绪
				ConfirmModal: false, //确认弹窗
				ArrayResultDialog: false, //数组型结果是否显示
				ArrayHistoryDialog:false,//数组行型历史记录是否显示
				ArrayResultContent: '', //数组型结果内容
				selectedinParamsIndex: 0, //选中的入参下标
				PageData: {
					id: 'density',
					name: '十六烷值数',
					inParams: [{
							name: '样品ID',
							value: '',
							paramsID: 'sampleID',
							default: '',
							type: 'string'
						},
						{
							name: 'P15密度(kg/m3)',
							value: '822.1',
							paramsID: 'des',
							default: '',
							type: 'number'
						},
						{
							name: '馏程10%',
							value: '195',
							paramsID: 'p10',
							default: '',
							type: 'number'
						},
						{
							name: '馏程50%',
							value: '252',
							paramsID: 'p50',
							default: '',
							type: 'number'
						},
						{
							name: '馏程90%',
							value: '325.5',
							paramsID: 'p90',
							default: '',
							type: 'number'
						}
					],
					formula: '',
					outParams: [{
						name: '十六烷值数',
						value: '',
						type: 'number'
					}]
				},
				HistoryData: [],
				ArrayResult:[]
			}
		},
		onLoad(res) {
			console.log(res.qid)
			this.PageData = []
			this.qid = res.qid

			this.DBdata(res.qid)
			this.GetHistory(res.qid)
		},
		onReady() {
			this.loadAnimation()
		},
		methods: {
			/* 数组型历史记录显示 */
			showArrayHistory(res){
				this.ArrayResult = res
				this.ArrayHistoryDialog = true
			},
			/* 数组型结果展示 */
			showArrayResult(res) {
				this.ArrayResultContent = res
				this.ArrayResultDialog = true
			},

			/*单例级联选择器选中 */
			selected(res) {
				console.log(res)
				this.PageData.inParams[this.selectedinParamsIndex].value = res[0].data
			},
			/* 单列级联选择器数据预处理 */
			loadList(value, index) {
				this.selectedinParamsIndex = index
				return value.default.split('|')
			},
			/* 加载动画 */
			loadAnimation() {
				//console.log(result)
				this.$refs.lottie.registerAnimation(result)
			},

			/* 获取数据库数据 */
			DBdata(res) {
				const db = uniCloud.database();

				db.collection('minitool-function').where("id == '" + this.qid + "'").get().then((res) => {
					this.isReady = true

					if (res.result.data[0] == undefined) {

					} else {
						this.PageData = res.result.data[0]
					}
					//console.log(res.result.data[0])

				}).catch((err) => {
					this.isReady = true
					uni.showToast({
						icon: 'error'
					})
				})
			},

			/* 重置所有参数 */
			reset() {
				for (var i = 0; i < this.PageData.inParams.length; i++) {
					this.PageData.inParams[i].value = this.PageData.inParams[i].default
				}
				console.log(this.PageData.inParams)
			},
			/* 调用云函数开始计算 */
			/* 应该可以，所有的参数添加特殊符号，计算公式用的用带特殊符号的参数，然后替换一下，再用eval（）解析公式计算 */
			calc() {
				//组合计算参数
				var params = {}
				for (var i = 0; i < this.PageData.inParams.length; i++) {
					params[this.PageData.inParams[i].paramsID] = this.PageData.inParams[i].value
				}
				console.log(params)
				uniCloud.callFunction({
					name: 'lab',
					data: {
						f_name: this.PageData.id,
						f_value: params,
						f_out: this.PageData.outParams
					},
					success: (res) => {
						console.log(res.result)
						if (res.result == 'error') {
							uni.showToast({
								icon: 'error',

								title: '参数错误'
							})
						} else {
							this.PageData.outParams = res.result
							this.SetHistory()
						}

					}
				})
			},
			/* 设置计算历史 */
			SetHistory() {

				var len = this.HistoryData.length

				var newVal = deepClone(this.PageData)
				console.log(len)
				if (len >= 100) {
					this.HistoryData.pop()
				}

				this.HistoryData.unshift(newVal)

				uni.setStorage({
					key: this.PageData.id,
					data: this.HistoryData
				})
			},
			/* 读取计算历史 */
			GetHistory(res) {
				var old = uni.getStorageSync(res)
				//this.HistoryData = old?old:[]
				if (old) {
					this.HistoryData = deepClone(old)
				} else {
					this.HistoryData = []
				}

			},
			/* 删除历史记录 */
			DelHistoryAll(res) {
				uni.showModal({
					title: '清空确认',
					content: '确定清空所有记录？',
					success: (res) => {
						if (res.confirm) {
							uni.removeStorageSync(this.PageData.id)
							this.HistoryData = []
						}
					}
				})
			},
			DelHistorySingle(index) {
				uni.showModal({
					title: '删除确认',
					content: '确定要删除该记录吗？',
					success: (res) => {
						if (res.confirm) {
							this.HistoryData.splice(index, 1)
							uni.setStorage({
								key: this.PageData.id,
								data: this.HistoryData
							})
						}
					}
				})
			}
		}
	}
</script>

<style>

</style>
